import React, {Component} from 'react'
import { connect } from 'react-redux'
import { Dropdown, Menu, Icon, Badge } from 'antd'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
const screenfull = require('screenfull');

// import Breadcrumb from './Breadcrumb'
import { toggleMenu } from '../actions/sideBar'
import logo from 'images/logo.png'
import Ajax from 'lib/Ajax'
import NewsShow from '../page/news/components/newsShow'

class ModuleName extends Component{
	constructor(props) {
	  super(props);
	  this.state = {
      isFullscreen: false,
      newsList: [],
      newsId: "",
			visible: false,
			show: false
    }
	}

	componentDidMount(){
    this.loadNews();
  }

	renderLinks = (menu)=>{
		var find = false;
		const loop = (data) => {
	    data.forEach((item) => {
	    	if(!find){
		      if(item.url){
		        find = item;
		      }else if(item.children){
		        loop(item.children);
		      }
		    }
	    });
	  };
	  loop(menu.children||[]);
		return <Link key={ menu.id } to={ find?find.url:"/" }><Icon type={menu.icon||""} /> {menu.name}</Link>
	}

	fullPage = ()=>{
		if(screenfull.enabled) {
      screenfull.toggle();
      this.setState({
      	isFullscreen: screenfull.isFullscreen
      });
    }
	}

	loadNews = ()=>{
    var self = this;
    Ajax({
      url: '/news/listNotice',
      data: {},
      success: function(data){
        self.setState({
          newsList: data
        });
      },
      error: function(error){
        message.error(error);
      }
    });
  }

	render(){
		let { user } = this.props.common;
    let menus = user&&user.menu||[];
    let userMsg = user&&user.user||{};
    const { newsList } = this.state;
    const menu = (
		  <Menu>
		  	<Menu.Item>
		  		账号：{userMsg.userAccount}
		  	</Menu.Item>
		  	{
		  		userMsg.userType !="typein"&&<Menu.Item>
		  			机构：{userMsg.workOrgName}
		  		</Menu.Item>
		  	}
		  	<Menu.Item>
		  		区划：{userMsg.areaName}
		  	</Menu.Item>
		  	<Menu.Item>
		  		<span className="line"></span>
		      <Link to="/system/permission/password">修改密码</Link>
		    </Menu.Item>
		    <Menu.Item>
		      <a href={this.props.common.loginOutUrl}>退出登录</a>
		    </Menu.Item>
		  </Menu>
		);

		return (
			<div className="ant-layout-header">
				<div className="flex flex-row flex-nowrap flex-justify-space-between flex-align-center ">
					<div className="flex-item flex-align-center">
						<div className="ant-layout-logo">
						<img src={ logo } alt="logo" />
						</div>
					</div>
					<div className="flex-item flex-align-center breadcrumb-wrapper header-center">
						{/*<Breadcrumb></Breadcrumb>*/}
						<a href="javascript:;" className="button" onClick={this.props.toggleMenu}>
							<i className="x-icon x-icon-list"></i>
						</a>
						<div className="nav-link">
							{
								_.map(menus, (menu) => {
									return this.renderLinks(menu)
								})
							}
						</div>
					</div>
					<div className="flex-item flex-align-center top-nav-wrapper">
						<div className="message" onClick={this.fullPage}>
							<Icon type={this.state.isFullscreen?"shrink":"arrows-alt"}/>
					  </div>
						<div 
							className="message news-xx" 
							onMouseEnter={
								function(){
									this.setState({
										show: true
									})
								}.bind(this)
							}
							onMouseLeave={
								function(){
									this.setState({
										show: false
									})
								}.bind(this)
							}
						>
						  <span className="ant-badge" title={newsList.length}>
						  	<i className="anticon anticon-notification "></i>
						  	{
						  		newsList.length>0&&(<sup data-show="true" className="ant-scroll-number ant-badge-count" height="18">
							  		<span className="ant-scroll-number-only" style={{height: 18}}>
							  			<p className="">{newsList.length}</p>
							  		</span>
							  	</sup>)
						  	}
						  </span>
						  <div className="news-list" style={{display: this.state.show?'block':'none'}}>
						  {
			    			newsList.length>0?(newsList.map((item)=>{
			    				return <a href="javascript:;" key={item.newsId} onClick={()=>{
									          this.setState({
									            newsId: item.newsId,
									            visible: true
									          })
									        }}>{item.title}</a>
			    			})):(<span>暂无系统通知</span>)
			    		}
			    		</div>
					  </div>
						<Dropdown overlay={menu}>
					    <a className="ant-dropdown-link button" href="javascript:;" style={{paddingBottom:12,marginBottom:-12}}>
					      <Icon type="user"/> {this.props.common&&this.props.common.user&&this.props.common.user.user.userName||''}<i className="x-icon x-icon-s-arrow-down"></i>
					    </a>
						</Dropdown>
						</div>
					</div>
					<NewsShow
	          onClose={()=>{
	            this.setState({
	              visible: false
	            })
	          }}
	          newsId={this.state.newsId}
	          visible={this.state.visible}
	        />
			</div>
		)
	}
}

function mapStateToProps(state) {
  return {
    common: state.common
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ toggleMenu }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(ModuleName)

